<template>
  <div class="rightBotBox">
    <h4>停车时长统计</h4>
    <div id="rightBotCharts" :style="{width: '100%', height: '100%'}"></div>
  </div>
</template>

<script>
import {
  getTotalStop
} from '../api/api';
export default {
  name: 'rightBot',
  data() {
    return {
      msg: 'rightBot'
    }
  },
  mounted() {

    this.drawRightBot();

    setInterval(() => {
      this.drawRightBot();
    }, 30000);
  },
  methods: {
    drawRightBot() {

      getTotalStop().then(res => {
        var chartData = new Array;
        chartData.push({
          name: '1h 以内',
          value: res.percent_1h
        });
        chartData.push({
          name: '1h~2h',
          value: res.percent_2h
        });
        chartData.push({
          name: '2h~3h',
          value: res.percent_3h
        });
        chartData.push({
          name: '3h~4h',
          value: res.percent_4h
        });
        chartData.push({
          name: '4h 以上',
          value: res.percent_up_4h
        });
        // 基于准备好的dom，初始化echarts实例
        let rightBotCharts = this.$echarts.init(document.getElementById('rightBotCharts'))

        // 绘制图表
        var option = {
          // backgroundColor: '#0a1132',
          legend: {
            orient: 'horizontal',
            bottom: '5%',
            data: ['1h 以内', '1h~2h', '2h~3h', '3h~4h', '4h 以上'],
            textStyle: {
              color: '#fff'
            },
          },
          series: [{
            type: 'pie',
            selectedMode: 'single',
            radius: ['40%', '54%'],
            color: ['#1fd4df', '#af6cc9', '#439afb', '#efc49a', '#5374ff'],

            label: {
              normal: {
                formatter: '{d}%',
                textStyle: {
                  color: '#fff',
                  fontSize: 16
                }
              }
            },
            data: chartData,
          }]
        }

        rightBotCharts.setOption(option);

        var app = {
          currentIndex: -1
        };

        setInterval(function () {
          var dataLen = option.series[0].data.length;
          // 取消之前高亮的图形
          rightBotCharts.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: app.currentIndex
          });
          app.currentIndex = (app.currentIndex + 1) % dataLen;
          // 高亮当前图形
          rightBotCharts.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: app.currentIndex,
          });
          // 显示 tooltip
          rightBotCharts.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: app.currentIndex
          });
        }, 3000);

      })

    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.rightBotBox {
  position: absolute;
  right: 0.44rem;
  top: 6.95rem;
  background: url(../assets/rightcombg.png) no-repeat;
  background-size: 100% auto;
  width: 6.15rem;
  height: 3.1rem;
  color: aqua;
}

.rightBotBox h4 {
  position: absolute;
  left: 0.3rem;
  top: 0.1rem;
  font-size: 0.18rem;
  color: #18b3f0;
  margin: 0;
  padding: 0;
}
</style>
